<template>
	<view class="detail-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" :title="title"></uni-navbar></view>

		<view class="p-text" v-show="!representive.userId">您没有固定联系常委，无法提交</view>

		<view class="" v-show="representive.userId">
			<view class="form-box">
				<u-form :model="form" ref="uForm">
					<u-form-item class="form-item" required label="提交人" prop="createName">
						<!-- block -->
						<u-input v-model="form.createName" type="text" placeholder="请输入" />
					</u-form-item>
					<u-form-item class="form-item" required label="手机号" prop="phone">
						<!-- block -->
						<u-input v-model="form.phone" type="number" placeholder="请输入" />
					</u-form-item>
					<u-form-item class="form-item" label="" v-if="phone != form.phone">
						<u-input v-model="form.smsCode" inputAlign="left" type="number" placeholder="短信验证码" />
						<template v-slot:right>
							<view class="code" @click="getCode">{{ codeTips }}</view>
							<!-- <u-button class="code" type="error" size="mini" @click="getCode">{{ codeTips }}</u-button> -->
						</template>
						<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
					</u-form-item>
					<u-form-item class="form-item border-none" required label="联系常委" prop="representive">
						<view class="input-text">{{ representive.userName }}</view>
					</u-form-item>
					<u-form-item class="form-item" required label="常委职务" prop="position">
						<view class="input-text">{{ representive.positionName }}</view>
					</u-form-item>

					<u-form-item class="form-item" required label="问题标题" prop="title">
						<!-- block -->
						<u-input v-model="form.title" type="text" placeholder="请输入" />
					</u-form-item>
					<u-form-item class="form-item border-none" required label="" labelPosition="top" prop="opinionDescribe">
						<u-input v-model="form.opinionDescribe" inputAlign="left" type="textarea" placeholder="请输入您的问题（必填）" :clearable="false" :height="160" :maxlength="-1" />
					</u-form-item>

					<u-form-item class="form-item" labelPosition="top">
						<!-- block -->
						<uni-file-upload :type="['all', 'image', 'audio']" :limit="10"></uni-file-upload>
					</u-form-item>

					<u-form-item class="form-item border-none" required label="发生地点" prop="address">
						<view class="input-text" @click="chooseLocation" v-if="form.address">{{ form.address }}</view>
						<view class="form-right" v-else>
							<u-input @click="chooseLocation" disabled type="text" placeholder="请点击定位" />
							<u-icon name="arrow-right" size="32" color="#c0c4cc"></u-icon>
							<!-- <u-input type="chooose" disabled placeholder="请点击定位" @click="chooseLocation" /> -->
						</view>
					</u-form-item>
					<u-form-item class="form-item" label="详细位置">
						<!-- block -->
						<u-input v-model="form.address2" type="text" placeholder="请输入" />
					</u-form-item>
				</u-form>
			</view>

			<view class="fiexd-btm"><u-button class="form-btn" type="error" @click="confirm">提交</u-button></view>
		</view>

		<view v-if="false && willClue"></view>
	</view>
</template>

<script>
import uniAudio from '@/components/uni-audio.vue';
import uniFileUpload from '@/components/uni-file-uploader.vue';
import dateTimePicker from '@/components/uni-datetime-picker';
import selectTree from '@/components/uni-select-tree.vue';
import { mapState } from 'vuex';
export default {
	components: {
		uniAudio,
		uniFileUpload,
		dateTimePicker,
		selectTree
	},
	data() {
		return {
			id: '',
			title: '问题提报',
			typeA: '',
			userName: '',
			phone: '',
			count: 3,
			ocrKey: '',
			disabled: false,
			isShow: true,
			codeTips: '获取验证码',
			content: ``,

			timer: '',

			type: '',
			typeShow: false,
			typeList: [],

			llzIds: [],
			llzName: '',
			llzShow: false,
			llzList: [],
			llzStr: '',

			dbIds: [],
			dbName: '',
			dbShow: false,
			dbList: [],
			dbStr: '',

			representive: {},
			dictType: '',
			form: {
				id: '',
				title: '',
				dataType: '1',
				opinionClassify: '',
				opinionClassifyChild: '',
				createBy: '',
				createName: '',
				coordinate: '',
				address: '',
				address2: '',
				phone: '',
				smsCode: '',
				remark: '',
				representive: '',
				representiveId: '',
				position: '',
				jieId: '',
				ciId: '',
				clientCode: '',
				opinionDescribe: ''
			},
			rules: {
				title: [
					{
						required: true,
						message: '请输入标题',
						trigger: 'change'
					}
				],
				createName: [
					{
						required: true,
						message: '请输入提交人',
						trigger: 'change'
					}
				],
				address: [
					{
						required: true,
						message: '请点击定位',
						trigger: 'change'
					}
				],
				phone: [
					{
						required: true,
						message: '请输入手机号',
						trigger: ['change']
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['change']
					}
				],
				smsCode: [
					{
						required: true,
						message: '请输入验证码',
						trigger: 'change'
					}
				],
				opinionDescribe: [
					{
						required: true,
						message: '请输入您的问题',
						trigger: 'change'
					}
				]
			},
			willClue: {
				adoptUser: '',
				clientCode: ''
			}
		};
	},
	onLoad(option) {
		this.loadLogin();
		if (option && option.id) {
			this.id = option.id;
		}
		// this.loadDict('mqzt_type', 'typeList');
		// this.loadSite();
		// this.loadTeam();
		this.loadUser();

		uni.setNavigationBarTitle({
			title: this.title
		});
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onUnload() {
		this.$store.commit('filePush', []);
	},
	computed: {
		...mapState(['userInfo', 'fileList'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.userInfo) {
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.userId = this.userInfo.sysUser.id;
				this.userName = this.userInfo.sysUser.userName;
				this.phone = this.userInfo.sysUser.phone;
				this.form.phone = this.phone;
				this.form.clientCode = this.clientCode;
				this.form.createName = this.userName;
				this.form.createBy = this.userId;

				this.form.jieId = this.userInfo.userInfo.jieId;
				this.form.ciId = this.userInfo.userInfo.ciId;
			} else {
				// this.$logout();
			}
		},
		codeChange(text) {
			this.codeTips = text;
		},
		getCode() {
			let data = {};
			if (this.$refs.uCode.canGetCode) {
				this.$request('/sms/code?tel=' + this.form.phone, data, {
					load: true
				}).then((res) => {
					this.$msg('验证码已发送');
					this.$refs.uCode.start();
				});
			} else {
				this.$u.toast('倒计时结束后再发送');
			}
		},
		selectShow(e) {
			if (this.disabled) {
				return false;
			}
			this[e] = true;
		},
		treeConfirm(e, type) {
			if (!e || e.length == 0) {
				this[type + 'Show'] = false;
				this[type + 'Name'] = '';
				this[type + 'Ids'] = [];
				return false;
			}

			this[type + 'Ids'] = [];
			if (e.length > 0) {
				if (type == 'db') {
					this[type + 'Ids'].push(e[0].userId);
					this[type + 'Name'] = e[0].userName;
				} else {
					this[type + 'Ids'].push(e[0].id);
					this[type + 'Name'] = e[0].stationName;
				}
			}
			this[type + 'Show'] = false;
		},
		treeCancel(e, type) {
			this[type + 'Show'] = false;
		},
		checkboxGroupChange(e) {
			this.reflectUserIdentity = e;
			this.form.reflectUserIdentity = e.join(',');
		},
		typeConfirm(e) {
			this.type = e[0].label;
			this.form.type = e[0].value;
			this.form.opinionType = e[0].value;
		},
		typeGroupChange(e) {
			this.type = e;
			this.form.type = e;
			this.form.opinionType = e;
		},
		loadUser() {
			this.$request('/minqingzhitong/msPublicOpinion/getCommittee', {
				userId: this.userId
			}).then((res) => {
				if (!res.data) {
					return false;
				}
				this.representive = res.data;
				this.form.position = res.data.position;
				this.form.representiveId = res.data.userId;
			});
		},
		loadDict(type, list, value) {
			this.$request('/system/sys-dict/dictList', {
				clientCode: this.clientCode,
				sysDict: {
					dictType: type
				}
			}).then((res) => {
				if (!res.data) {
					return false;
				}
				this[list] = [];
				res.data.forEach((item) => {
					this[list].push({
						value: item.dictValue,
						name: item.dictValue,
						label: item.dictName
					});
				});
			});
		},
		chooseLocation(e) {
			uni.getLocation({
				type: 'gcj02',
				success: (result) => {
					uni.chooseLocation({
						longitude: result.longitude,
						latitude: result.latitude, //纬度
						success: (res) => {
							console.log(res);
							this.form.address = res.address;
							this.form.coordinate = res.longitude + ',' + res.latitude;
						}
					});
				}
			});
		},
		siteTo(e) {
			if (this.llzIds.length == 0) {
				this.$msg('请选择联络站');
				return false;
			}
			uni.navigateTo({
				url: '/pagesB/will/app?id=' + this.llzIds[0] + '&name=' + this.llzName
			});
		},
		navTo(e) {
			uni.navigateTo({
				url: e
			});
		},
		back(e) {
			uni.navigateBack({});
		},
		confirm() {
			this.$refs.uForm.validate((valid) => {
				if (!valid) {
					console.log('验证失败');
					return false;
				} else {
					if (this.phone != this.form.phone) {
						if (!this.form.smsCode) {
							this.$msg('请输入验证码');
							return false;
						}
						this.$request('/sms/checkCode', {
							tel: this.form.phone,
							smsCode: this.form.smsCode
						}).then((res) => {
							uni.setStorageSync('phone', this.form.phone);
							this.sendContent();
						});
					} else {
						this.sendContent();
					}
				}
			});
		},
		sendContent() {
			let data = {};
			data = {
				...this.form,
				address: this.form.address + this.form.address2,
				representiveId: this.form.representiveId,
				fileList: this.fileList
			};

			let url = '/minqingzhitong/msPublicOpinion/save';
			this.$request(url, data, {
				load: true
			}).then((res) => {
				this.$msg(res.msg);
				setTimeout(() => {
					let pre = this.$prePage();
					if (pre && pre.loadData) {
						pre.loadData('refresh');
					}
					uni.navigateBack();
				}, 500);
			});
		}
	}
};
</script>

<style lang="scss">
.detail-view {
	background-color: #fff;
}

.p-text {
	padding: 30rpx;
	font-size: 17px;
	font-weight: 500;
	color: #d0021b;
	line-height: 48rpx;
	background-color: #f6f7fb;
}

.popup-box {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	padding: 30rpx;
	background-color: #fff;

	.h2 {
		margin-bottom: 26rpx;
		font-size: 18px;
		font-weight: 600;
		color: #333;
		line-height: 48rpx;
		text-align: center;
	}

	.summon {
		white-space: pre-wrap;
		font-size: 17px;
		line-height: 54rpx;

		.p {
			margin-bottom: 1em;
		}
	}
}

.popup-flex {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.m-box {
	flex-wrap: nowrap;
	flex: 1;
	height: 0;
}

.node {
	margin: 20rpx 0 0 20rpx;
	font-size: 14px;
	color: #9b9b9b;
	line-height: 120rpx;
}

.form-box {
	.p-text {
		padding: 30rpx;
		font-size: 17px;
		font-weight: 500;
		color: #d0021b;
		line-height: 48rpx;
		background-color: #f6f7fb;
	}

	.form-item {
		@include mp-flex;
		border-bottom: 20rpx solid #f5f7fa;

		&.border-none {
			border-bottom: 0;
		}
	}

	.code {
		padding: 0 16rpx;
		color: #d0021b;
	}

	.input-text {
		width: 100%;
		padding: 11rpx 0;
		line-height: 48rpx;
		text-align: right;
	}

	.form-right {
		display: flex;
		justify-content: flex-end;
		width: 100%;
		text-align: right;

		.image {
			margin-left: 20rpx;
			width: 70rpx;
			height: 70rpx;
		}
	}

	.form-checkbox {
		// padding: 8rpx 0;
		margin: -8rpx 0;
	}
}

.fiexd-btm {
	position: static;
	padding: 30rpx;
}
</style>
